<template>
  <div class="home">
    <van-tabs v-model="active">
      <van-tab title="账号密码登录"></van-tab>
      <van-tab title="手机号登录"></van-tab>
    </van-tabs>

    <div v-if="active == 0" class="form">
      <van-field
        v-model="username"
        required
        clearable
        placeholder="请输入用户名"
      />

      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"
        required
      />
    </div>
    <div v-if="active == 1" class="form">
      <van-field
        v-model="username"
        required
        clearable
        placeholder="请输入用户名"
      />

      <van-field v-model="code" placeholder="请输入验证码" required
        ><van-button
          slot="button"
          size="small"
          type="primary"
          :disabled="show"
          @click="fsyzm"
        >
          <span v-if="!show">发送验证码</span>
          <span v-if="show">{{ countdown }}后可获取</span>
        </van-button></van-field
      >
    </div>
    <van-radio-group v-model="radio" class="radios">
      <van-radio name="1"
        >我已同意 <span>用户协议</span> 及 <span>隐私条款</span></van-radio
      >
    </van-radio-group>
    <div class="login">
      <van-button round type="danger" @click="login()">登录</van-button>
    </div>
    <van-divider class="dsf">第三方登录</van-divider>
    <a
      @click="tz"
      class="qq"
      href="https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fconsult-patients.itheima.net%2Flogin%2Fcallback"
    >
      <img src="@/assets/qq.svg" alt="" />
    </a>
  </div>
</template>

<script>
import service from "../request";
import { Toast } from "vant";
export default {
  name: "home",
  components: {},
  data() {
    return {
      code: "",
      show: false,
      username: "13211112222",
      countdown: 60,
      radio: "",
      password: "abc12345",
      active: 0,
    };
  },
  mounted() {
    this.getdlicon();
  },
  methods: {
    tz() {},
    async login() {
      if (this.radio !== "1") {
        Toast.fail("请先勾选用户同意协议");
      } else {
        if (this.active == 0) {
          const res = await service.post("/login/password", {
            mobile: this.username,
            password: this.password,
          });
          if (res.code == 10000) {
            Toast.success(`登录成功`);
            window.localStorage.setItem("token", res.data.token);
               window.localStorage.setItem("key",JSON.stringify(res.data))
            this.$router.push({
              path: "/about",
            });
          } else {
            Toast.fail(`${res.message}`);
          }
          console.log(res);
        }else{
           const res = await service.post("/login", {
            mobile: this.username,
            code: this.code,
          });
          if (res.code == 10000) {
            Toast.success(`登录成功`);
            window.localStorage.setItem("token", res.data.token);
            window.localStorage.setItem("key",JSON.stringify(res.data))
            this.$router.push({
              path: "/about",
            });
          } else {
            Toast.fail(`${res.message}`);
          }
        }
      }
    },
    getdlicon() {},
    async fsyzm() {
      const res = await service.get("/code", {
        params: {
          mobile: this.username,
          type: "login",
        },
      });
      this.code = res.data.code;
      if (res.code == 10000) {
        console.log(res);
      } else {
        Toast.fail(`${res.message}`);
      }
      console.log(res);
      this.show = true;
      this.djs();
    },
    djs() {
      if (this.countdown == 0) {
        clearTimeout();
        this.show = false;
      } else {
        this.show = true;
        this.countdown--;
        setTimeout(() => {
          this.djs();
        }, 1000);
      }
    },
  },
};
</script>
<style scoped>
.qq {
  width: 100%;
  display: block;
  margin-top: 10px;
  text-align: center;
}
.dsf {
  width: 90%;
  margin: 117px auto 0px auto;
}
.login button {
  width: 100%;
}
.login {
  width: 90%;
  margin: 35px auto;
}
.form {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
}
.home {
  width: 100%;
  height: 100%;
}
.radios span {
  color: #eb5757;
}
.radios {
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  font-size: 14px;
}
</style>